<script src="../../dist/mini-vue.js"></script>

<!-- item template -->
<script type="text/x-template" id="item-template">
    <li>
    <div
      :class="{bold: isFolder.value}"
      @click="toggle"
      @dblclick="changeType">
      {{model.name}}
      <span v-if="isFolder.value">[{{open.value ? '-' : '+'}}]</span>
    </div>
    <ul v-if="isFolder.value" :style="{display: open.value ? 'block' : 'none'}">
      <tree-item
        class="item"
        v-for="model in model.children"
        :model="model">
      </tree-item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</script>
<!-- item script -->
<script>
  const { reactive, computed, ref } = MiniVue;

  const TreeItem = {
    template: '#item-template',
    props: ['model'],
    setup(props) {
      const open = ref(false);
      const isFolder = computed(() => {
        return props.model.children && props.model.children.length;
      });

      function toggle() {
        open.value = !open.value;
      }

      function changeType() {
        if (!isFolder.value) {
          props.model.children = [];
          addChild();
          open.value = true;
        }
      }

      function addChild() {
        props.model.children.push({
          name: 'new stuff',
        });
      }

      return {
        open,
        isFolder,
        toggle,
        changeType,
        addChild,
      };
    },
  };
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the app root element -->
<ul id="demo">
  <tree-item class="item" :model="treeData"></tree-item>
</ul>

<script>
  const treeData = {
    name: 'My Tree',
    children: [
      {
        name: 'hello',
      },
      {
        name: 'wat',
      },
      {
        name: 'child folder',
        children: [
          {
            name: 'child folder',
            children: [
              {
                name: 'hello',
              },
              {
                name: 'wat',
              },
            ],
          },
          {
            name: 'hello',
          },
          {
            name: 'wat',
          },
          {
            name: 'child folder',
            children: [
              {
                name: 'hello',
              },
              {
                name: 'wat',
              },
            ],
          },
        ],
      },
    ],
  };

  MiniVue.createApp({
    components: {
      TreeItem,
    },
    setup() {
      return {
        treeData,
      };
    },
  }).mount('#demo');
</script>

<style>
  body {
    font-family: Menlo, Consolas, monospace;
    color: #444;
  }

  .item {
    cursor: pointer;
  }

  .bold {
    font-weight: bold;
  }

  ul {
    padding-left: 1em;
    line-height: 1.5em;
    list-style-type: dot;
  }
</style>
